<template>
  <div>
    <mt-header fixed title="萌宠到家">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div id="iframe">
      <iframe class="map-item" id="getAddress" @load="loadiframe"
        src="https://m.amap.com/picker/?key=47665cb6f06cf0cea6e092359a0192aa&amp;keywords=宠物"
        style="width:100%; height:100%;position: absolute;z-index:22222;"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pet',
  data () {
    return {
      locationData: {}
    }
  },
  methods: {
    loadiframe () {
      let iframe = document.getElementById('getAddress').contentWindow
      iframe.postMessage('hello', 'https://m.amap.com/picker/')
      window.addEventListener('message', function (e) {
        if (e.data.command !== 'COMMAND_GET_TITLE') {
          // 业务代码
          console.log(e)
          if (e.data.name) {
            alert(e.data.name + ' 地址：' + e.data.address)
          }
        }
      }, false)
    }
  }
}
</script>

<style lang="stylus" scoped>
.mint-cell-wrapper
  padding-top: .3rem
  padding-bottom: .3rem
  background-image: none
.mint-header
  background: #ec2935
.mint-navbar .mint-tab-item
  color: #333
  border-bottom: 1px solid #ccc
.mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #ec2935
  color: #ec2935
.map-item
  position: fixed
  bottom: 0
  top: .8rem
  left: 0
  right: 0
  background: #fff
  z-index: 222
</style>
